@use './global' as *;
@use './mixins' as *;

// These z-indexes are used to manage the skintone picker animation and make it look nicer.
// The skintone picker should appear to expand "behind" the skintone button.
$skintoneZIndex1: 1;
$skintoneZIndex2: 2;
$skintoneZIndex3: 3;

// skintone picker

.skintone-button-wrapper {
  background: var(--background);
  z-index: $skintoneZIndex3;
}

.skintone-button-wrapper.expanded {
  z-index: $skintoneZIndex1; // place behind the skintone dropdown after the listbox has animated
}

.skintone-list {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  z-index: $skintoneZIndex2;
  overflow: visible;
  background: var(--background);
  border-bottom: var(--border-size) solid var(--border-color);
  border-radius: 0 0 var(--skintone-border-radius) var(--skintone-border-radius);
  will-change: transform;
  transition: transform 0.2s ease-in-out;
  transform-origin: center 0;

  @media (prefers-reduced-motion: reduce) {
    // We still want the transition event to fire, so we can listen for the transitionend event
    // but unfortunately transition: none would just eliminate this entirely. So just make it
    // effectively instant. I found 0.001s looks best in Firefox (avoids a jerky split-second animation)
    // while still fixing WebKit (which doesn't work if you set 0s or transition-delay: -1s or other hacks).
    // see also: https://github.com/jensimmons/cssremedy/issues/11
    transition-duration: 0.001s;
  }

  // TODO: remove this when old iOS Safari drops out of usage: https://caniuse.com/css-logical-props
  // For now, we don't support RTL in old versions of iOS
  @supports not (inset-inline-end: 0) {
    right: 0;
  }

  &.no-animate {
    transition: none;
  }
}


// tab panel

.tabpanel {
  @include scrollbar-gutter-stable; // avoid emojis shifting during search, when scrollbar may disappear
  -webkit-overflow-scrolling: touch; // fix iOS scrolling
  will-change: transform; // fix "repaints on scroll" warning in Chrome https://crbug.com/514303
  min-height: 0;
  flex: 1;
  contain: content;
}

.emoji-menu {
  display: grid;
  grid-template-columns: repeat(var(--num-columns), var(--total-emoji-size));
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;

  // Improve performance in custom emoji by using `content-visibility: auto` on every category
  &.visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size:
      // width
      calc(var(--num-columns) * var(--total-emoji-size))
      // height
      calc(var(--num-rows) * var(--total-emoji-size));
  }
}

.category {
  padding: var(--emoji-padding);
  font-size: var(--category-font-size);
  color: var(--category-font-color);
}

// emoji

button.emoji,
.emoji {
  font-size: var(--emoji-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  height: var(--total-emoji-size);
  width: var(--total-emoji-size);
  line-height: 1;
  overflow: hidden;
  font-family: var(--emoji-font-family);
  cursor: pointer;

  // see https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
  @media(hover: hover) and (pointer: fine) {
    &:hover {
      background: var(--button-hover-background);
    }
  }

  &:active,
  &.active {
    background: var(--button-active-background);
  }
}

// Don't eagerly download the images while the custom emoji is offscreen
.onscreen .custom-emoji::after {
  content: '';
  width: var(--emoji-size);
  height: var(--emoji-size);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: var(--custom-emoji-background);
}

// nav

.nav {
  display: grid;
  justify-content: space-between;
  align-items: center;
  contain: content;
}

.nav-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-emoji {
  font-size: var(--category-emoji-size);
  width: var(--total-category-emoji-size);
  height: var(--total-category-emoji-size);
}

// indicator

.indicator-wrapper {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.indicator {
  $opacityAnim: 0.1s;
  $transformAnim: 0.25s;
  width: calc(100% / var(--num-groups));
  height: var(--indicator-height);
  opacity: var(--indicator-opacity);
  background-color: var(--indicator-color);
  will-change: transform, opacity;
  transition: opacity #{$opacityAnim} linear, transform #{$transformAnim} ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    will-change: opacity;
    transition: opacity #{$opacityAnim} linear;
  }
}

// search

.pad-top {
  width: 100%;
  height: var(--emoji-padding);
  z-index: $skintoneZIndex3;
  background: var(--background);
}

.search-row {
  display: flex;
  align-items: center;
  position: relative;
  padding-inline-start: var(--emoji-padding);
  padding-bottom: var(--emoji-padding);
}

.search-wrapper {
  flex: 1;
  min-width: 0;
}

input.search {
  padding: var(--input-padding);
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color);
  background: var(--background);
  color: var(--input-font-color);
  width: 100%;
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);

  &::placeholder {
    color: var(--input-placeholder-color);
  }
}

// favorites

.favorites {
  @include scrollbar-gutter-stable; // line up favorites with the tabpanel
  display: flex;
  flex-direction: row;
  border-top: var(--border-size) solid var(--border-color);
  contain: content;
}

// unsupported warning

.message {
  padding: var(--emoji-padding);
}
